<template>
    <main class="wss-container">
        <div class="label-box-content">
            <el-row :gutter="24" type="flex">
                <el-col :span="10" class="study-box">
                    <NewCard :title="selectRadioList.roleName?`${selectRadioList.roleName}学习`:'学习'">
                        <!-- 步骤 -->
                        <div class="tabOne">
                            <!-- 1 -->
                            <div
                                class="tablist"
                                :class="[
                                presentStep == 1 ? 'isActive' : '',
                                presentStep > 1 ? 'isOk' : '',
                                ]">
                                <i class="tabNum">1</i>
                                <i class="el-icon-circle-check"></i>
                                <el-button round>选择角色</el-button>
                            </div>
                            <b
                                :class="[
                                presentStep == 1 ? 'isActive' : '',
                                presentStep > 1 ? 'isOk' : '',
                                ]"></b>
                            <!-- 2 -->
                            <div
                                class="tablist"
                                :class="[
                                presentStep == 2 ? 'isActive' : '',
                                presentStep > 2 ? 'isOk' : '',
                                ]">
                                <i class="tabNum">2</i>
                                <i class="el-icon-circle-check"></i>
                                <el-button round>学习列表</el-button>
                            </div>
                        </div>

                        <!-- 选择角色 -->
                        <div class="selectRole" v-if="presentStep==1">
                            <!-- 我的角色 -->
                            <p class="isTitle">我的角色({{selectedRole.length}})</p>
                            <p class="loadP" v-if="roleloading">加载中 <i class="el-icon-loading" ></i></p>
                            <template v-else>
                                <div class="myRoles" v-if="myRoleList.length">
                                    <el-tag
                                        v-for="item in myRoleList"
                                        :key="item.roleName"
                                        effect="plain"
                                        :class="[item.type=='0'?'isDefault':'',selectedRoleIdList.includes(item.roleId)?'isCheck':'']"
                                        @click="clickRoleItem(item)">
                                        <p>{{ item.roleName }}</p>
                                        <i class="el-icon-success"></i>
                                    </el-tag>
                                </div>
                                <p class="loadP" v-else>暂无数据</p>
                            </template>

                            <!-- 进入学习列表 -->
                            <div class="selectList">
                                <p class="isTitle"><span>*</span> 选择已有角色，进入相应的学习列表</p>
                                <p class="loadP" v-if="roleloading">加载中 <i class="el-icon-loading" ></i></p>
                                <template v-else>
                                    <ul v-if="selectedRole.length">
                                        <li v-for="(role,index) in selectedRole" :key="index">
                                            <div class="list-left">
                                                <el-progress type="circle" :percentage="role.myPassRate" color="#f87a23" :width='50'></el-progress>
                                                <div class="list-lTxt">
                                                    <h3>{{role.roleName}}</h3>
                                                    <p><span v-if="role.examList">科目：{{role.examList.length}}</span><span>已通过：{{role.myPassNum}}</span></p>
                                                </div>
                                            </div>
                                            <!--  -->
                                            <el-radio v-model="selectRadio" :label="role.roleId" v-if="role.examList" :disabled="!role.examList.length" @change="selectRadioItem(role)"></el-radio>
                                        </li>
                                    </ul>
                                    <p class="loadP" v-else>暂无数据</p>
                                </template>
                            </div>

                            <!-- 按钮 -->
                            <div class="nextSubBtn" v-if="selectRadio">
                                <SubBtn>
                                    <template slot="btn">
                                        <el-button round class="shareBtn" @click="goStudy">去学习</el-button>
                                    </template>
                                </SubBtn>
                            </div>
                        </div>

                        <!-- 学习列表 -->
                        <div class="studyList" v-else>
                            <ul>
                                <li v-for="(study,index) in studyList" :key="index" @click="clickStudyItem(study)" :class="selectStudyItem.id == study.id?'isActive':''">
                                    <h3>
                                        {{study.examName}}
                                        <i v-if="study.changed=='1' && study.status=='2'">有题目新增</i>
                                    </h3>
                                    <div class="studyList-info">
                                        <p>
                                            <span>分数：{{'score' in study? `${study.score}分`:'--'}}</span>
                                            <span>总题数：{{study.questionNum?study.questionNum:0}}题</span>
                                            <span>奖励：{{study.giveVoucher?study.giveVoucher:0}}问金</span>
                                            <span>学习次数：{{study.times?study.times:0}}次</span>
                                        </p>
                                        <!-- 通过了的显示打钩 -->
                                        <i class="el-icon-circle-check" v-if="study.status == '1'"></i>
                                        <!-- 做题中显示正在做题 -->
                                        <svg-icon icon-class="ing_icon" v-else-if="study.status == '3'"/>
                                        <!-- 不通过的或者题目有新增或者还没做过的的显示按钮 -->
                                        <el-button round v-else @click.stop="goStudying(study)" :disabled="getStudyDisabled(study)">{{getStudyingBtnTxt(study)}}</el-button>
                                    </div>
                                </li>
                            </ul>

                            <!-- 返回按钮 -->
                            <div class="returnBtn">
                                <SubBtn>
                                    <template slot="btn">
                                        <el-button @click="returnIcon"><svg-icon icon-class="return_icon"/>选择其他角色</el-button>
                                    </template>
                                </SubBtn>
                            </div>
                        </div>
                    </NewCard>
                </el-col>
                <el-col :span="14">
                    <!-- 推荐内容 -->
                    <FeaturedContent v-if="startOrScore==0"></FeaturedContent>
                    <!-- 学习结果 -->
                    <Result :selectStudyItem="selectStudyItem" :selectRadioList="selectRadioList" v-if="startOrScore==1"></Result>
                    <!-- 学习中 -->
                    <Studying :selectStudyItem="selectStudyItem" :selectRadioList="selectRadioList" v-if="startOrScore==2"></Studying>
                </el-col>
            </el-row>
        </div>
    </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";
import FeaturedContent from "@/components/FeaturedContent/index.vue";
import Result from "./result.vue"
import Studying from "./studying.vue"
//防抖：debounce 用户触发事件过于频繁，只要最后一次事件的操作
import debounce from "lodash/debounce";

import {getExamMyRoleListApi,getExamResultListDefaultApi,getRoleCheckStudyApi,getRoleUnCheckStudyApi,editExamResultApi} from "@/BMViews/api/assess/exam.js"
export default {
    name: 'study',
    components:{NewCard,SubBtn,FeaturedContent,Result,Studying},
    data(){
        return{
            presentStep: 1, //1选择角色 2学习列表
            startOrScore: 0, //0推荐内容 1学习结果 2开始答题
            // 分页
            pageing: { pageNum: 1, pageSize: 12, total: 0 },

            // **************************选择角色**************************
            myRoleList: [],// 我的角色列表
            roleloading: false,//加载的显示隐藏
            selectedRoleIdList: [],//已选的角色的id列表
            selectedRole: [],//已选的角色列表

            selectRadio: '',//选择的一个角色的id
            selectRadioList: {},//选择的一个角色

            // **************************学习列表**************************
            studyList:[],// 学习列表
            selectStudyItem: {},//选择的一条学习列表
        }
    },
    beforeDestroy() {
        // 解绑$bus
        this.$bus.$off('endOfTheTest')
        this.$bus.$off('clickStartBus')
    },
    mounted(){
        this.getExamMyRoleList() // 获取学习角色列表

        // $bus结束考试
        this.$bus.$on('endOfTheTest',async (study)=>{
            // this.selectStudyItem = study
            await this.getExamResultListDefault() // 重新获取这个角色下的所有科目
            this.selectStudyItem = this.studyList.find(item=>{
                return item.id == study.id
            })
            this.startOrScore = 1 //显示学习结果
        })

        // 结果页点击开始学习、重新学习、再次学习
        this.$bus.$on('clickStartBus',async (study)=>{
            await this.goStudying(study) 
            this.$bus.$emit('showStudying')
        })
    },
    methods:{
        // ---------------------选择角色---------------------
        // 获取学习角色列表
        async getExamMyRoleList(){
            this.roleloading = true
            let result = await getExamMyRoleListApi()
            if(result.code==200){
                this.myRoleList = result.rows
                this.roleloading = false
                // 默认选好系统角色
                result.rows.forEach(item => {
                    if(item.type=='0' || item.myRole == '1'){
                        this.selectedRoleIdList.push(item.roleId) //已选id列表
                        this.selectedRole.push(item) //已选列表
                    }
                });
            }
        },

        // 点击一个我的角色
        clickRoleItem: debounce(function(item){
            if(item.type == '0') return
            if(this.selectedRoleIdList.includes(item.roleId)){
                // 获得下标
                let index = this.selectedRoleIdList.indexOf(item.roleId);
                this.selectedRoleIdList.splice(index,1)// 根据下标去删数据 已选的id列表
                // 获得下标
                let roleIndex = this.selectedRole.findIndex((role) => role.roleId == item.roleId);
                this.selectedRole.splice(roleIndex,1)// 根据下标去删数据 已选的列表
                this.getRoleUnCheckStudy(item.roleId) // 取消勾选自定义角色
            }else{
                this.selectedRoleIdList.push(item.roleId) //已选id列表
                this.selectedRole.push(item) //已选列表
                this.getRoleCheckStudy(item.roleId) //勾选自定义角色
            }
        },300),

        // 勾选自定义角色
        async getRoleCheckStudy(roleId){
            let data = {
                roleId: roleId,
                userIds: this.$store.state.user.userId,
            }
            let result = await getRoleCheckStudyApi(data)
            if(result.code!=200) return
        },

        // 取消勾选自定义角色
        async getRoleUnCheckStudy(roleId){
            let data = {
                roleId: roleId,
                userIds: this.$store.state.user.userId,
            }
            let result = await getRoleUnCheckStudyApi(data)
            if(result.code!=200) return
        },

        // 选择一个角色的时候
        selectRadioItem(role){
            this.selectRadioList = role //选择好的角色，准备去学习用的
        },

        // 点击去学习
        goStudy(){
            if(!this.selectRadioList.roleId) return
            this.presentStep = 2
            this.getExamResultListDefault() // 获取这个角色下的所有科目
        },
        // ---------------------选择角色---------------------end

        // ---------------------学习列表---------------------
        // 获取这个角色下的所有科目
        async getExamResultListDefault(){
            let roleId = this.selectRadioList.roleId
            let result = await getExamResultListDefaultApi({roleId})
            if(result.code==200){
                this.studyList = result.rows
            }
        },

        // 选择一条学习列表
        clickStudyItem(study){
            // 答题中不能点击
            if(this.startOrScore==2){
                return
            }
            if(study.status == '3'){
                // 当前科目状态是答题中
                this.goStudying(study)
                return
            }
            this.selectStudyItem = study
            this.startOrScore = 1
        },

        // 点击开始学习
        async goStudying(study){
            await this.editExamResult(study.id)
            study.status = '3'
            this.selectStudyItem = study
            this.startOrScore = 2
        },

        // 判断按钮能否点击
        getStudyDisabled(study){
            // 没有题目或者正在考试状态不能点击
            if(!study.questionNum || this.startOrScore==2){
                return true
            }else{
                return false
            }
        },

        // 点击开始学习要把状态改为3做题中和清空已答对的数量 的接口
        async editExamResult(id){
            console.log(id,'mmmmmmmmmidmmmmmmmmmmmmmmm');
            let data = {
                id: id,
                status: '3',
                quesYes: 0,
            }
            let result = await editExamResultApi(data)
            if(result.code != 200) return
        },

        // 不通过的或者题目有新增或者还没做过的的显示按钮
        getStudyingBtnTxt(study){
            // 状态 1通过 -1未通过 0未开始 2继续学习
            const stateMap = {
                '-1': "重新学习",
                0: "开始学习",
                2: "再次学习",
            };
            return stateMap[study.status];
        },

        // 点击返回按钮
        returnIcon(){
            this.presentStep = 1
        },
        // ---------------------学习列表---------------------end
    },
}
</script>

<style lang="scss" scoped>

.isTitle{
    font-size: 14px;
    color: #333333;
    margin-top: 30px;
    span{
        color: #F87A23;
    }
}

.selectRole{
    margin: 0 30px;
}

.loadP{
    text-align: center;
    margin: 10px 0;
    font-size: 12px;
    color: #999;
}

// 我的角色列表
.myRoles{
    .el-tag{
        position: relative;
        width: 15%;
        height: 32px;
        padding: 0;
        line-height: 32px;
        text-align: center;
        color: #333;
        border: 1px solid #E3E3E3;
        margin-right: 2%;
        margin-top: 15px;
        cursor: pointer;
        p{
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow:ellipsis;
        }
        i{
            display: none;
            position: absolute;
            right: -5px;
            top: -5px;
            font-size: 14px;
            color: #39486f;
        }
        &:active{
            background-color: #eee;
        }
    }
    .el-tag:nth-child(6n){
        margin-right: 0;
    }
    // 选中状态
    .isCheck{
        background-color: #F1F3FF;
        color: #808BA9;
        i{
            display: block;
        }
    }
    // 默认选中
    .isDefault{
        background-color: #F9FBFF;
        color: #B3ABAB;
        i{
            color: #BDC2D0;
        }
    }
}

// 已选角色列表
.selectList{
    margin-bottom: 60px;
    ul{
        margin-top: 15px;
        li{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #EFEFEF;
            .list-left{
                display: flex;
                align-items: center;
                .el-progress{
                    margin-right: 15px;
                }
                h3{
                    font-size: 16px;
                    color: #232323;
                    margin-bottom: 10px;
                }
                p{
                    font-size: 12px;
                    color: #999999;
                    span{
                        margin-right: 15px;
                    }
                }
            }
        }
    }
}

// 底部按钮
.nextSubBtn{
    .subBtn{
        padding: 10px 30px;
        .shareBtn{
            border-color: #f87a23;
            background: #f87a23;
            color: #fff;
        }
    }
}

// 学习列表
.studyList{
    margin-top: 10px;
    margin-bottom: 60px;
    ul{
        li{
            padding: 20px 30px;
            cursor: pointer;
            h3{
                position: relative;
                font-size: 16px;
                color: #232323;
                margin-bottom: 5px;
                i{
                    position: absolute;
                    top: -15px;
                    background-color: #6A779F;
                    border-radius: 10px 0px 10px 0px;
                    color: #fff;
                    font-style: normal;
                    font-size: 12px;
                    padding: 3px 6px;
                }
            }
            .studyList-info{
                display: flex;
                align-items: center;
                justify-content: space-between;
                span{
                    font-size: 12px;
                    color: #999999;
                    margin-right: 20px;
                }
                .el-button{
                    font-size: 12px;
                    padding: 6px 10px;
                    border-color: #F87A23;
                    background-color: #fff;
                    color: #F87A23;
                }
                i{
                    color: #45B968;
                }
            }
        }
        .isActive{
            background-color: #F4F5F8;
        }
    }
}

// 返回按钮
.returnBtn{
    .subBtn{
        padding: 10px 30px;
        justify-content: space-between;
        .el-button{
            border: 0;
            width: auto;
            background-color: #fff;
            svg{
                margin-right: 5px;
            }
        }
    }
}
</style>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
.wss-container >>> .el-card__body {
  position: relative;
  padding: 0 30px;
}
.wss-container >>> .el-card__body > div {
  height: calc(100% - 45px);
  overflow-y: auto;
}
.wss-container >>> .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul,p,h3,h4 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}

.study-box >>> .el-card__body{
    padding: 0;
}
.study-box >>> .el-card__body .top{
    margin: 0 30px;
}


/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin: 0 30px;
  margin-top: 15px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist .tabNum {
  font-style: normal;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  border: 2px solid #c8cce2;
  border-radius: 50%;
  color: #c8cce2;
}
.tabOne .tablist .el-icon-circle-check {
  display: none;
  font-size: 30px;
  color: #c8cce2;
}
.tabOne .tablist.isActive .tabNum {
  border-color: #6A769F;
  background-color: #6A769F;
  color: #fff;
}
.tabOne .tablist.isOk .tabNum {
  display: none;
}
.tabOne .tablist.isOk .el-icon-circle-check {
  display: block;
}

.tabOne .tablist button {
  color: #9c9da6;
  font-size: 14px;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 25px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne > b {
  display: flex;
  align-items: flex-end;
}
.tabOne > b::before,
.tabOne > b::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  border-right: 0px solid transparent;
  border-left: 6px solid #c8cce2;
  margin-bottom: 15px;
  margin-right: 1px;
}
.tabOne > b.isOk::before,
.tabOne > b.isOk::after,
.tabOne > b.isActive::before,
.tabOne > b.isActive::after {
  border-left-color: #6A769F;
}

.tabOne .tablist.isActive button,
.tabOne .tablist.isOk button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #6A769F;
  border-color: #6A769F;
}
.tabOne .tablist.isOk button {
  background-color: #909bb7;
  border-color: #909bb7;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}
@media (max-width: 1430px) {
  .tabOne .tablist button {
    padding: 6px 8px;
  }
}

/* 单选框 */
::v-deep .el-radio__label {
  display: none;
}
::v-deep .el-radio .el-radio__inner {
  width: 24px;
  height: 24px;
  border-color: #bbbbbb;
  background: #fff;
}
::v-deep .el-radio .is-disabled .el-radio__inner {
  background: #f2f2f2;
}
::v-deep .el-radio .is-checked .el-radio__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 12px;
  height: 8px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}

.list-left >>> .el-progress__text{
    font-size: 14px!important;
}
</style>